<template>
  <n-form
    :model="formParams"
    :rules="rules"
    ref="formRef"
    label-placement="left"
    :label-width="100"
    require-mark-placement="left"
  >
    <n-divider title-placement="left" class="mt-3">基本设置</n-divider>
    <n-form-item label="上级分类" path="parent_id">
      <n-tree-select
        key-field="id"
        label-field="name"
        :options="getPermissionList"
        clearable
        v-model:value="formParams.parent_id"
      />
    </n-form-item>

    <n-grid x-gap="12" :cols="2">
      <n-gi>
        <n-form-item path="redirect">
          <template #label>
            <span>
              <n-tooltip trigger="hover">
                <template #trigger>
                  <n-icon :size="18" class="mr-1 -mt-1 text-gray-400 cursor-pointer">
                    <QuestionCircleOutlined />
                  </n-icon>
                </template>
                分类名称，一般不超过4个字
              </n-tooltip>
              <span>分类名称</span>
            </span>
          </template>
          <n-input placeholder="分类名称" v-model:value="formParams.name" />
        </n-form-item>
      </n-gi>
      <n-gi>
        <n-form-item label="显示排序" path="orderNum">
          <n-input-number placeholder="显示排序" v-model:value="formParams.order" class="w-full" />
        </n-form-item>
      </n-gi>
    </n-grid>

    <n-grid x-gap="12" :cols="2">
      <n-gi span="2">
        <n-form-item path="redirect">
          <template #label>
            <span>
              <n-tooltip trigger="hover">
                <template #trigger>
                  <n-icon :size="18" class="mr-1 -mt-1 text-gray-400 cursor-pointer">
                    <QuestionCircleOutlined />
                  </n-icon>
                </template>
                分类图标，只支持png格式图标，尺寸是XX*XX
              </n-tooltip>
              <span>分类图标</span>
            </span>
          </template>
          <BasicUpload
            :action="`${uploadUrl}/api/images`"
            :headers="uploadHeaders"
            name="image"
            :data="{ type: '0' }"
            :width="100"
            :height="100"
            :maxSize="1"
            @uploadChange="uploadChange"
            v-model:value="formParams.icon"
            helpText="分类图标，只支持png格式图标，尺寸是XX*XX。单个文件不超过2MB，最多只能上传10个文件"
          />
        </n-form-item>
      </n-gi>
    </n-grid>

    <!-- <n-grid x-gap="12" :cols="2">
      <n-gi>
        <n-form-item path="route_url" v-if="formParams.menu_type != 2">
          <template #label>
            <span>
              <n-tooltip trigger="hover">
                <template #trigger>
                  <n-icon :size="18" class="mr-1 -mt-1 text-gray-400 cursor-pointer">
                    <QuestionCircleOutlined />
                  </n-icon>
                </template>
                路由地址，如：user
              </n-tooltip>
              <span>路由地址</span>
            </span>
          </template>
          <n-input placeholder="路由地址" v-model:value="formParams.route_url" />
        </n-form-item>
      </n-gi>
      <n-gi>
        <n-form-item path="route_name" v-if="formParams.menu_type != 2">
          <template #label>
            <span>
              <n-tooltip trigger="hover">
                <template #trigger>
                  <n-icon :size="18" class="mr-1 -mt-1 text-gray-400 cursor-pointer">
                    <QuestionCircleOutlined />
                  </n-icon>
                </template>
                对应路由配置文件中 `name` 只能是唯一性，配置 `http(s)://` 开头地址 则会新窗口打开
              </n-tooltip>
              <span>路由名称</span>
            </span>
          </template>
          <n-input placeholder="路由地址" v-model:value="formParams.route_name" />
        </n-form-item>
      </n-gi>
    </n-grid>

    <n-grid x-gap="12" :cols="2" v-if="formParams.menu_type > 0">
      <n-gi>
        <n-form-item path="permission_code">
          <template #label>
            <span>
              <n-tooltip trigger="hover">
                <template #trigger>
                  <n-icon :size="18" class="mr-1 -mt-1 text-gray-400 cursor-pointer">
                    <QuestionCircleOutlined />
                  </n-icon>
                </template>
                权限标识，也是权限字符，比如 `system:menu:list`
              </n-tooltip>
              <span>权限标识</span>
            </span>
          </template>
          <n-input
            placeholder="权限标识 system:user:add"
            v-model:value="formParams.permission_code"
          />
        </n-form-item>
      </n-gi>
      <n-gi>
        <n-form-item path="permission_name">
          <template #label>
            <span>
              <n-tooltip trigger="hover">
                <template #trigger>
                  <n-icon :size="18" class="mr-1 -mt-1 text-gray-400 cursor-pointer">
                    <QuestionCircleOutlined />
                  </n-icon>
                </template>
                权限名称 对应 权限标识 `中文名称`
              </n-tooltip>
              <span>权限名称</span>
            </span>
          </template>
          <n-input placeholder="权限名称 添加用户" v-model:value="formParams.permission_name" />
        </n-form-item>
      </n-gi>
    </n-grid> -->

    <n-divider title-placement="left" class="mt-3">功能设置</n-divider>

    <n-grid x-gap="12" :cols="2">
      <n-gi>
        <n-form-item label="上线/下线" path="always_show">
          <template #label>
            <span>
              <n-tooltip trigger="hover">
                <template #trigger>
                  <n-icon :size="18" class="mr-1 -mt-1 text-gray-400 cursor-pointer">
                    <QuestionCircleOutlined />
                  </n-icon>
                </template>
                分类上线/下线功能，如果选择下线则所有子分类都会下线，如果选择上线则其余分类还需要手动上线
              </n-tooltip>
              <span>上线/下线</span>
            </span>
          </template>
          <n-switch v-model:value="formParams.status" />
        </n-form-item>
      </n-gi>
    </n-grid>

    <n-form-item class="submit-form-item" v-if="isShowSubmit">
      <n-button type="primary" :loading="subLoading" @click="formSubmit">保存修改</n-button>
    </n-form-item>
  </n-form>
</template>

<script lang="ts" setup>
  import { ref, unref, reactive, computed } from 'vue';
  import { useMessage } from 'naive-ui';
  import { addInformationCategory, editInformationCategory } from '@/api/information/information';
  import { QuestionCircleOutlined } from '@vicons/antd';
  import { BasicUpload } from '@/components/Upload';
  import { useGlobSetting } from '@/hooks/setting';

  const globSetting = useGlobSetting();
  const { uploadUrl } = globSetting;

  const emit = defineEmits(['change']);

  const props = defineProps({
    permissionList: {
      type: Array,
    },
    isShowSubmit: {
      type: Boolean,
      defalut: false,
    },
  });

  const message = useMessage();
  const formRef: any = ref(null);
  const subLoading = ref(false);

  const defaultValueRef = () => ({
    id: 0,
    parent_id: 0,
    name: '',
    icon: [],
    order: 1,
    status: false,
  });

  const formParams: any = ref(defaultValueRef());

  const getPermissionList = computed(() => {
    return props.permissionList;
  });

  const rules = {
    name: {
      required: true,
      message: `分类名称`,
      trigger: 'blur',
    },
    // route_url: {
    //   required: true,
    //   message: '路由地址不能为空',
    //   trigger: 'blur',
    // },
    // component: {
    //   required: true,
    //   message: '组件路径不能为空',
    //   trigger: 'blur',
    // },
    // route_name: {
    //   required: true,
    //   message: '路由名称不能为空',
    //   trigger: 'blur',
    // },
    // frame_src: {
    //   required: true,
    //   message: '外部地址不能为空',
    //   trigger: 'blur',
    // },
  };

  function setData(data) {
    formParams.value = data;
    formRef.value?.restoreValidation();
  }

  function formSubmit() {
    subLoading.value = true;
    formRef.value.validate((errors) => {
      if (!errors) {
        if (!formParams.value.id) {
          addInformationCategory(formParams.value)
            .then(() => {
              subLoading.value = false;
              message.success('添加成功');
              handleReset();
              emit('change');
            })
            .catch(() => {
              subLoading.value = false;
            });
        } else {
          editInformationCategory(formParams.value)
            .then(() => {
              subLoading.value = false;
              message.success('修改成功');
              handleReset();
              emit('change');
            })
            .catch(() => {
              subLoading.value = false;
            });
        }
      } else {
        subLoading.value = false;
        message.error('请填写完整信息');
      }
    });
  }

  function handleReset() {
    formRef.value.restoreValidation();
    formParams.value = Object.assign(formParams.value, defaultValueRef());
  }

  // 图片上传请求图片请求头
  const uploadHeaders: any = reactive({});

  function uploadChange(list: string[]) {
    formParams.value.icon = unref(list);
  }

  defineExpose({
    formSubmit,
    handleReset,
    setData,
  });
</script>

<style lang="less" scoped>
  .submit-form-item {
    margin-left: 100px;
  }
</style>
